<template>
	<view class="page flex flex-col">
		<navbar :leftText="'业务招募'" :backStatus="true"></navbar>
		<view class="w690  flex-1" style="overflow-y: hidden;">
			<view class="flex-center">
				<view style="width:100%;">
					<up-tabs :list="list1" @click="selectApply" lineWidth="80" lineColor="#38FDFF" :activeStyle="{
					    color: '#38FDFF',
					    fontWeight: 'bold'
					}" :inactiveStyle="{
					    color: '#FFFFFF ',
					    transform: 'scale(1)'
					}" itemStyle="padding-left: 20px; padding-right: 20px; height: 50px;"></up-tabs>
					<view class="classify"></view>
				</view>

			</view>

			<!-- 收益明细 -->
			<view class="shouYi heightFull">
				<view class="flex-start">
					<view class="text-white zhaoName">
						<text class="text-red">*</text>
						姓名
					</view>
					<view class="zhaoItem">
						<up-input placeholder="请输入联系人姓名" border="surround" v-model="form.name"
							@change="change"></up-input>
					</view>
				</view>
				<view class="flex-start">
					<view class="text-white zhaoName">
						<text class="text-red">*</text>联系电话
					</view>
					<view class="zhaoItem">
						<up-input type="number" maxlength="11" placeholder="请输入电话号码" border="surround"
							v-model="form.mobile" @change="change"></up-input>
					</view>
				</view>
				<view class="flex-start">
					<view class="text-white zhaoName">
						<text class="text-red">*</text>公司名称
					</view>
					<view class="zhaoItem">
						<up-input placeholder="请输入企业名称" border="surround" v-model="form.company"
							@change="change"></up-input>
					</view>
				</view>
				<view class="flex-start">
					<view class="text-white zhaoName">
						<text class="text-red">*</text>所在地区
					</view>
					<view class="zhaoItem" @click="selectArea">
						<up-input placeholder="请选择省市地区" disabled border="surround" v-model="form.areaName"
							@change="change"></up-input>
					</view>
				</view>
				<view @click="submitApply" class="submit flex-center text-white">提交</view>
			</view>



		</view>

		<up-picker :show="isShowArea" ref="uPickerRef" keyName="name" :columns="columns" @confirm="confirmArea"
			@change="changeArea" @cancel="cancelArea"></up-picker>
	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';

	import {
		test
	} from 'uview-plus';
	const isShowArea = ref(false);
	// 打开区域弹窗
	const selectArea = () => {
		isShowArea.value = true;
	}

	// 招募下表
	const zhaoIndex = ref(0);

	// 选择招募申请
	const selectApply = (val) => {
		console.log("选择招募申请", val);
		zhaoIndex.value = val.index;

		//清楚表单数据
		form.value.areaId = "";
		form.value.name = "";
		form.value.mobile = "";
		form.value.areaName = "";
		form.value.company = "";
	}

	let form = ref({
		name: "",
		mobile: "",
		company: "",
		areaId: "",
		areaName: ""
	})

	// 关闭区域弹窗
	const cancelArea = () => {
		isShowArea.value = false;
	}
	// 地区数据
	const areaData = ref();
	const columns = ref([
		[],
		[],
		[]
	]);
	let imageUrl = ref("");
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;

		// 获取城市数据
		let cityData = "https://yyx-web-oss.oss-cn-beijing.aliyuncs.com/data/area.json"

		// 请求地区数据
		uni.request({
			url: "https://yyx-web-oss.oss-cn-beijing.aliyuncs.com/data/area.json",
			success: (res) => {
				console.log("res", res);
				areaData.value = res.data.data

				columns.value = [areaData.value, areaData.value[0].children, areaData.value[0]
					.children[0].children
				]
				console.log("areaData.value", areaData.value);
			}
		})
	})

	// 省的下表
	const proIndex = ref(0);

	// 市下表
	const cityIndex = ref(0);

	// 区下表
	const areaIndex = ref(0);

	// 区域发生变化
	const changeArea = (e) => {
		console.log("e", e);
		if (e.columnIndex == 0) {
			proIndex.value = e.index;
			columns.value[1] = areaData.value[e.index].children;
			columns.value[2] = areaData.value[e.index].children[0].children
		} else if (e.columnIndex == 1) {
			cityIndex.value = e.index
			columns.value[2] = areaData.value[proIndex.value].children[e.index].children
		} else {
			areaIndex.value = e.index
		}
		console.log("columns", columns);
	}

	// 确认选择区域
	const confirmArea = () => {
		form.value.areaName = areaData.value[proIndex.value].name + "-" + areaData.value[proIndex.value].children[
			cityIndex
			.value].name + "-" + areaData.value[proIndex.value].children[cityIndex
			.value].children[areaIndex.value].name;

		form.value.areaId = areaData.value[proIndex.value].children[cityIndex
			.value].children[areaIndex.value].id;

		isShowArea.value = false;
	}



	// 收益分类
	const list1 = reactive([{
			name: '服务商申请'
		},
		{
			name: '团队申请'
		}
	]);

	// 提交招募申请
	const submitApply = () => {
		if (!form.value.name) {
			uni.showToast({
				title: "请输入姓名",
				icon: 'none'
			})
			return false
		}

		if (!form.value.mobile) {
			uni.showToast({
				title: "请输入手机号",
				icon: 'none'
			})
			return false
		}

		if (!test.mobile(form.value.mobile)) {
			uni.showToast({
				title: "电话格式不正确",
				icon: 'none'
			})
			return false
		}

		if (!form.value.company) {
			uni.showToast({
				title: "请输入公司名称",
				icon: 'none'
			})
			return false
		}

		if (!form.value.areaName) {
			uni.showToast({
				title: "请输入所在区域",
				icon: 'none'
			})
			return false
		}
		let urlApply;
		if (zhaoIndex.value == 0) {
			urlApply = "/app-api/member/agent/agent"
		} else {
			urlApply = "/app-api/member/agent/leader"
		}

		let e = {
			url: urlApply,
			data: {
				name: form.value.name,
				mobile: form.value.mobile,
				company: form.value.company,
				areaId: form.value.areaId,
				areaName: form.value.areaName.split("-")[2],
			}
		}

		api.default.post(e).then((res) => {

			uni.showToast({
				title: "保存成功",
				icon: 'none'
			})


			//清楚表单数据
			form.value.areaId = "";
			form.value.name = "";
			form.value.mobile = "";
			form.value.areaName = "";
			form.value.company = "";
		})

	}
</script>

<style scoped>
	.submit {
		height: 88rpx;
		background: linear-gradient(90deg, #A102FF 0%, #162CFF 100%);
		border-radius: 44rpx;
		margin-top: 60rpx !important;
	}

	.u-tabs {
		width: 100%;
	}

	.classify {
		border-bottom: 2rpx solid #1F1757 !important;
		position: relative;
		top: -8rpx;
		/* left: 0;
		right: 0; */
	}

	.page /deep/ .u-tabs__wrapper__nav__line {
		z-index: 99;
	}


	.page /deep/ .u-border {
		border-color: rgba(22, 179, 255, 0.25) !important;

	}

	.page /deep/ .u-input {
		background-color: #141039 !important;
		width: 100% !important;
		height: 60rpx;

	}

	.zhaoItem {
		width: 70%;
	}

	.zhaoName {
		width: 20%;
		font-size: 28rpx;
	}

	.page /deep/ .uni-input-wrapper {
		font-size: 26rpx;

	}

	.page /deep/ .uni-input-input,
	.page /deep/ input {
		color: #fff !important;
		font-size: 26rpx !important;
	}

	.page /deep/ .uni-input-placeholder,
	.page /deep/ .input-placeholder {
		color: #5A669E !important;
	}

	.shouYi {
		margin-top: 30rpx;
	}

	.shouYi>view {
		margin-top: 20rpx;
	}

	.page /deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 30rpx !important;
	}
</style>